iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
自我挑戰組

從零開始Vuejs系列 第 5

[Day5] Vue.js 模板語法:插值

  • 分享至 

  • xImage
  •  

今天是第五天,那我想要分享一下Vue.js 模板語法:插值

Vue.js使用了基於HTML的模板語法,所以可以將實際的資料數據渲染至文件物件模型(DOM)

#Text(文本插值)
數據綁定最基礎的形式,使用“Mustache” 語法(雙大括號)

<div>
    {{message}}
</div>

Mustache 標籤會被message相對應的數據對象的值進行替換,當數據對象的屬性有變化時,它也會更新。

#Raw HTML
Mustache 標籤將數據解析為純文本而不是HTML。我們可以使用triple mustaches
,這樣就能輸出HTML字符串

<div>{{{message}}}</div>

#Attributes
Mustache 標籤也可以用在HTML attributes 內:

<div id="app_{{msg}}">
              
</div>

最後我們要注意在Vue的指令(directives)與special attributes中無法使用插值

官方文件
https://v1.vuejs.org/guide/syntax.html

插值就先分享到這邊,我們第六天見


上一篇
[Day4] Vue2與Vue3的差異
下一篇
[Day6] Vue.js簡單應用
系列文
從零開始Vuejs30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言